@charset "UTF-8";
@import '../../themes/default.scss';
@import '../../mixins/index.scss';
@import './define.scss';
// 生成通用颜色类
$componentPrefix: initPrefix();
// 是否生成网页颜色  $gradualColors 还有 shadow 的
$webColor: true;
// 是否生成 antColor 的shadow 样式
$antShadow: false;

#{$componentPrefix}bg-transparent {
  background-color: transparent;
  color: #fff;
}

// $backgroundColors color
@each $name, $textColor, $color in $backgroundColors {
  //eg: .ft-color-df
  #{$componentPrefix}#{$name} {
    background-color: $color;
    color: $textColor;
  }
}

// 通用背景颜色生成
@each $cname, $name, $color, $textColor in $colors {
  //eg: .ft-bg-red
  #{$componentPrefix}bg-#{$name} {
    // --cname: #{$cname};
    background-color: $color;
    color: $textColor;
  }
}

// ant 高亮颜色
@each $cname, $name, $color, $textColor, $lightColor, $darkColor in $colors {
  //eg: .ft-bg-red--light
  // 白色黑色不要了
  @if $name == 'white' or $name == 'black' {
    #{$componentPrefix}bg-#{$name}--light {
      //单独处理白色
      @if $name == 'white' or $color == '#ffffff' {
        background-color: $lightColor;
        color: $color;
      } @else {
        color: $color;
        background-color: #ffffff;
      }
    }
  } @else {
    #{$componentPrefix}bg-#{$name}--light {
      color: $color;
      background-color: $lightColor;
    }
  }
}

@if ($webColor) {
  // 渐变颜色
  @each $cname, $name, $start, $end in $gradualColors {
    //.ft-bg-gradual-red
    #{$componentPrefix}bg-gradual-#{$name} {
      background-image: linear-gradient(45deg, #{$start}, #{$end});
      color: #ffffff;
    }
  }
}

// $backgroundColors color gray
@each $cname, $name, $color, $textColor in $grayColors {
  //eg: .ft-bg-red
  #{$componentPrefix}bg-#{$name} {
    // --cname: #{$cname};
    background-color: $color;
    color: $textColor;
  }
}

@each $name, $color, $textColor, $lightColor, $darkColor in $infoColors {
  //eg: .ft-bg-success
  #{$componentPrefix}bg-#{$name} {
    background-color: $color;
    color: $textColor;
  }
  #{$componentPrefix}bg-#{$name}--light {
    background-color: $lightColor;
    color: $color;
  }
}

@each $name, $color, $textColor in $primaryClass {
  // eg: ft-bg-primary
  #{$componentPrefix}bg-#{$name} {
    background-color: $color;
    color: $textColor;
  }
}

// eg: ft-bg-primary--light
@each $name, $color, $textColor in $primaryClass {
  #{$componentPrefix}bg-#{$name}--light {
    // background-color : tint($color, 80%);
    background-color: $ft-color-primary-1;
    color: $color;
  }
}

// 颜色放在最后可以覆盖前面bg 中设置的颜色 可以不需要 important 后面向删除就可以删除
// 文本颜色
@each $name, $color in $neutrals {
  //eg: .ft-text-color-df
  #{$componentPrefix}#{$name} {
    color: $color;
  }
}

// 灰度颜色
@each $cname, $name, $color, $textColor in $grayColors {
  //eg: .ft-color-gray
  #{$componentPrefix}color-#{$name} {
    color: $color;
  }
}

// ant colors
// 通用颜色生成
@each $cname, $name, $color, $textColor in $colors {
  //eg: .ft-color-red .ft-color-green
  /* #{$cname} */
  #{$componentPrefix}color-#{$name} {
    color: $color;
  }
}

// 状态颜色 success, warning, error
@each $name, $color in $infoColors {
  //eg: .ft-color-success
  #{$componentPrefix}color-#{$name} {
    color: $color;
  }
}

// primary colors 放这里是想权重高点
@each $name, $color, $textColor in $primaryClass {
  // eg: ft-color-primary
  #{$componentPrefix}#{$name} {
    color: $color;
  }
}

// 如果是需要WebColor 就生成这里的shadow
@if ($webColor) {
  /* #ifndef APP-NVUE */

  // 如果生成 阿里颜色的shadow
  @if ($antShadow) {
    @each $cname, $name, $color, $textColor in $colors {
      //eg: .ft-shadow
      #{$componentPrefix}shadow[class*='-bg-#{$name}'] {
        @if $color == white or $color == 'white' {
          box-shadow: $commonShadowSpace $commonShadowSpace $commonShadowSpace * 2 0 $ft-shadow-color;
        } @else {
          // thro ui  5 14 0.2
          box-shadow: $commonShadowSpace $commonShadowSpace $commonShadowSpace * 2 0 tint($color, 80%);
        }
      }
    }

    @each $cname, $name, $color, $textColor in $colors {
      //eg: .ft-shadow-lg
      #{$componentPrefix}shadow-lg[class*='-bg-#{$name}'] {
        box-shadow: 0 $largeShadowSpace $largeShadowSpace * 2.5 0 tint($color, 80%);
      }
    }

    // --light shadow
    @each $cname, $name, $color, $textColor in $colors {
      //eg: .ft-shadow
      #{$componentPrefix}shadow[class*='-bg-#{$name}--light'] {
        box-shadow: $commonShadowSpace $commonShadowSpace $commonShadowSpace * 1.5 0 tint($color, 60%);
      }
    }

    @each $cname, $name, $color, $textColor in $colors {
      //eg: .ft-shadow-lg
      #{$componentPrefix}shadow-lg[class*='-#{$name}--light'] {
        box-shadow: $largeShadowSpace $largeShadowSpace $largeShadowSpace * 2.5 0 tint($color, 60%);
      }
    }
  }

  // -primary shadow
  @each $name, $color, $textColor in $primaryClass {
    #{$componentPrefix}shadow[class*='#{$name}'] {
      box-shadow: $commonShadowSpace $commonShadowSpace $commonShadowSpace * 1.5 0 tint($color, 80%);
    }
  }

  @each $name, $color, $textColor in $primaryClass {
    #{$componentPrefix}shadow-lg[class*='#{$name}'] {
      box-shadow: $largeShadowSpace $largeShadowSpace $largeShadowSpace * 2.5 0 tint($color, 80%);
    }
  }

  // 这里会覆盖上面的 class="ft-primary ft-shadow"
  // -primary--light shadow
  @each $name, $color, $textColor in $primaryClass {
    #{$componentPrefix}shadow[class*='#{$name}--light'] {
      box-shadow: $commonShadowSpace $commonShadowSpace $commonShadowSpace * 1.5 0 tint($color, 60%);
    }
  }

  @each $name, $color, $textColor in $primaryClass {
    #{$componentPrefix}shadow-lg[class*='#{$name}--light'] {
      box-shadow: $largeShadowSpace $largeShadowSpace $largeShadowSpace * 1.5 0 tint($color, 60%);
    }
  }

  /* #endif */
}
